<!-- xiaomu封装的组件：签约管理、服务管理、居民管理的 居民信息编辑表单 -->
<template>
  <div class="mu-info-box">
    <!-- 表格 -->
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto" inline require-asterisk-position="right">
      <el-form-item label="服务编号" v-if="formData._id">
        <span>{{ formData._id }}</span>
      </el-form-item>
      <el-form-item label="服务机构" prop="organizationId">
        <el-select v-model="formData.organizationId" size="default" clearable placeholder="请选择">
          <el-option :label="item.name" :value="item._id" v-for="item in organizationsData.rows" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务团队" prop="teamId">
        <el-select v-model="formData.teamId" size="default" clearable placeholder="请选择"
          :disabled="!formData.organizationId">
          <el-option :label="item.name" :value="item._id" v-for="item in doctorTeamsData.rows" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务医生" prop="doctorId">
        <el-select v-model="formData.doctorId" size="default" clearable placeholder="请选择" :disabled="!formData.teamId">
          <el-option :label="item.name" :value="item._id" v-for="item in doctorsData.rows" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务包" prop="servicePackId">
        <el-select v-model="formData.servicePackId" size="default" clearable placeholder="请选择"
          :disabled="!formData.teamId">
          <el-option :label="`${item.name}￥${item.price}`" :value="item._id" v-for="item in teamDetail.servicePackIds"
            :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务项目" prop="serviceItemId">
        <el-select v-model="formData.serviceItemId" size="default" clearable placeholder="请选择"
          :disabled="!formData.servicePackId">
          <el-option :label="`${item.name}￥${item.price}`" :value="item._id"
            v-for="item in servicePacksDetailData.serviceItemIds" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务地点" prop="place">
        <el-select v-model="formData.place" size="default" clearable placeholder="请选择">
          <el-option label="居民家里" value="居民家里" />
          <el-option label="机构门诊" value="机构门诊" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker v-model="formData.time" type="datetime" value-format="YYYY-MM-DD HH:mm" placeholder="请选择日期"
          size="default" clearable />
      </el-form-item>
    </el-form>
    <el-form-item label="服务备注" style="font-size: 14px; width: 700px;">
      <el-input v-model="formData.remark" type="textarea" placeholder="请输入" :autosize="{ minRows: 7 }" resize="none" />
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

import type { FormInstance } from 'element-plus'

import { useFindData } from '@/composables/findData';
import { getServiceItemsApi } from '@/api/serviceItems';
import { getDoctorsDetailApi } from '@/api/doctors';

defineEmits(['searchSigns']);

const {
  findOrganization,
  organizationsData,
  searchDoctorTeams,
  doctorTeamsData,
  searchDoctors,
  doctorsData,
  findServicePacks,
  servicePacksData,
  findTeamDetail,
  teamDetail,
  findServicePacksDetail,
  servicePacksDetailData
} = useFindData();

const formData: any = defineModel('formData');

const formRef = ref<FormInstance>();

// 表单验证规则
const rules: any = ref({
  organizationId: [{ required: true, message: '必填项' }],
  teamId: [{ required: true, message: '必填项' }],
  doctorId: [{ required: true, message: '必填项' }],
  servicePackId: [{ required: true, message: '必填项' }],
  serviceItemId: [{ required: true, message: '必填项' }],
  place: [{ required: true, message: '必填项' }],
});

// 某个服务包的服务项目数据
const serviceItemsData: any = ref([]);



// 侦听 机构 v-model数据，动态获取 服务团队 数据
watch(() => formData.value.organizationId, () => {
  searchDoctorTeams({
    organizationId: formData.value.organizationId
  });
});

// 侦听 服务团队 v-model数据，动态获取 服务医生、服务包 数据
watch(() => formData.value.teamId, () => {
  // 获取团队医生
  searchDoctors({
    teamId: formData.value.teamId
  })
  // 获取团队详情、拿到团队团队服务包数据
  findTeamDetail({
    _id: formData.value.teamId
  })
});

// 侦听 服务包 v-model数据，动态获取 服务项目 数据
watch(() => formData.value.servicePackId, () => {
  findServicePacksDetail({
    _id: formData.value.servicePackId
  });
});



onMounted(() => {
  findOrganization();
})



// 请求：获取医生详情
const getDoctorsDetail = async (_id: string) => {
  const res = await getDoctorsDetailApi({
    _id
  })

  console.log(res);

}

// 请求：获取 某个服务包的所有服务项目 数据
const getServiceItems = async (servicePackId: any) => {
  const res = await getServiceItemsApi({
    servicePackId
  });

  console.log(res);

  // if (res.code == 200) {
  //   formData.value.serviceItemId = '';

  //   serviceItemsData.value = res.data;
  // }
}

// 事件：确认 按钮 点击
const onSubmit = async () => {
  let isPassed = ref(true);
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    isPassed.value = valid;
  })
  return isPassed.value;
}



// 暴露给父组件的方法
defineExpose({
  onSubmit
});
</script>

<style scoped lang="scss">
.mu-info-box {

  // 去掉 label 左外边距
  :deep(.el-form-item__label-wrap) {
    margin-left: 0 !important;
  }

  .el-form {
    display: grid;
    grid-template-columns: repeat(4, 340px);
    grid-template-rows: repeat(2, 50px);
    justify-content: space-between;
  }
}
</style>